import React, { Component } from 'react'
import styles from "../assets/styles/model.module.css"

export default class Model extends Component {
    close = () => {
        this.props.closeModel()
    }
    render() {
        const { title, visible } = this.props
        if (visible) {
            return (
                // 透明遮罩
                <div className={styles.modelContainer}>
                    {/* 弹框内容显示 */}
                    <div className={styles.panel}>
                        <h3>{title}</h3>
                        <div className={styles.content}>
                            {/* children就是获取文档片段，在指定位置渲染 */}
                            {this.props.children}
                        </div>
                        <button onClick={this.close}>关闭</button>
                    </div>
                </div>
            )
        } else {
            return null
        }
    }
}
